<script setup>
import {useRouter} from "vue-router"

const router = useRouter()

function goHome() {
  /*编程式路由导航携带路由参数*/
  // router.push({path: "/home",query:{id:1}}) || router.replace({path:"/home",query:{id:1}}})
  // router.push({name: "home",query:{id:1},params:{id:1}}) || router.replace({name: "home",query:{id:1},params:{id:1}})
  router.push({name: "home", query: {id: 1}})
}

function goLogin() {
  /*编程式路由导航携带路由参数*/
  // router.push({path: "/Login",query:{id:2}}) || router.replace({path:"/Login",query:{id:2}}})
  // router.push({name: "login",query:{id:2},params:{id:2}}) || router.replace({name: "login",query:{id:2},params:{id:2}})
  router.push({name: "login", query: {id: 2}})

}

function goRegister() {
  /*编程式路由导航携带路由参数*/
  // router.push({path: "/Register",query:{id:3}}) || router.replace({path:"/Register",query:{id:3}}})
  // router.push({name: "register",query:{id:3},params:{id:3}}) || router.replace({name: "register",query:{id:3},params:{id:1}})
  router.push({name: "register", query: {id: 3}})

}

function retreat() {
  router.back()
}

function advance() {
  router.forward()
}

function AdvanceAndretreat() {
  router.go(1)
}
</script>

<template>
  <div class="App">
    <header>
      <!--声明式路由:携带query参数-->
      <router-link to="/home?id=1" active-class="active">首页</router-link>
      <router-link to="/login?id=2" active-class="active">登录</router-link>
      <router-link to="/register?id=3" active-class="active">注册</router-link>

      <!--声明式路由:携带params参数-->
      <!--<router-link to="/home/1" active-class="active">首页</router-link>-->
      <!--<router-link to="/login/2" active-class="active">登录</router-link>-->
      <!--<router-link to="/register/3" active-class="active">注册</router-link>-->

      <!--声明式路由:携带params参数以及query参数-->
      <!--      <router-link :to="{name:'home',params:{id:1},query:{id:1}}" active-class="active">首页</router-link>-->
      <!--      <router-link :to="{name:'login',params:{id:2},query:{id:2}}" active-class="active">登录</router-link>-->
      <!--      <router-link :to="{name:'register',params:{id:3},query:{id:3}}" active-class="active">注册</router-link>-->

      <!--编程式路由-->
      <button @click="goHome">首页</button>
      <button @click="goLogin">登录</button>
      <button @click="goRegister">注册</button>
      <button @click="retreat">《后退</button>
      <button @click="advance">前进》</button>
      <button @click="AdvanceAndretreat">可前进可后退</button>
    </header>
    <router-view></router-view>
  </div>
</template>

<style scoped lang="less">
header {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: cornflowerblue;
  border-bottom: 5px solid #f61717;

  button {
    margin: 0 10px;
  }

  .active {
    color: #fff;
  }
}

</style>
